<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze Irest</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.4.2/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a class="" href="menu_nav.html">
            < Irest / Kitchen
        </a>
    </div>
    <!--
    <h1 class="am-header-title">Amaze UI</h1>
    -->
    <div class="am-header-right am-header-nav">
        <a href="#user-link" class="">
            <i class="am-header-icon am-icon-envelope-o" data-am-modal="{target: '#my-msg-popup'}">
                <span id="animation-msg-count">0</span>
            </i>
        </a>
        <a href="#user-link" class="" data-am-modal="{target: '#my-popup'}">
            <i class="am-header-icon am-icon-user">

            </i>
        </a>
    </div>
</header>

<div class="am-popup" id="my-popup">
    <div class="am-popup-inner" style="padding-top:90px;">
        <div class="am-popup-hd" style="z-index:99;height:90px;">
            <h4 class="am-popup-title">
                厨房－01<br/>
                负责人：鸣人
            </h4>
      <span data-am-modal-close
            class="am-close">&times;</span>
        </div>
        <div class="am-popup-bd">
            what do you want to show here?
        </div>
    </div>
</div>

<div class="am-popup" id="my-msg-popup">
    <div class="am-popup-inner">
        <div class="am-popup-hd" style="z-index:99;">
            <h4 class="am-popup-title">
                通知中心－厨房－01
            </h4>
      <span data-am-modal-close
            class="am-close">&times;</span>
        </div>
        <div class="am-popup-bd">
            <!-- List -->
            <div data-am-widget="list_news" class="am-list-news am-list-news-default">
                <!--列表标题-->
                <div class="am-list-news-bd">
                    <ul class="am-list">
                        <li class="am-g am-list-item-dated">
                            <a href="##" class="am-list-item-hd ">what msg do you want to get?</a>
                            <span class="am-list-date">11:25</span>
                        </li>
                    </ul>
                </div>
                <!--更多在底部-->
                <div class="am-list-news-ft">
                    <a class="am-list-news-more am-btn am-btn-default" href="###">查看更多 &raquo;</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!--在这里编写你的代码-->
<div data-am-widget="tabs" class="am-tabs am-tabs-d2">
    <ul class="am-tabs-nav am-cf">
        <li class="am-active">
            <a href="[data-tab-panel-0]">TODO-LIST</a>
        </li>
        <li class="">
            <a href="[data-tab-panel-1]">COOKING</a>
        </li>
    </ul>
    <div class="am-tabs-bd">
        <div data-tab-panel-0 class="am-tab-panel am-active">
            <table class="am-table am-table-bordered am-table-striped am-table-hover">
                <thead>
                <tr>
                    <th>任务信息</th>
                    <th>创建时间</th>
                </tr>
                </thead>
                <tbody>
                <tr class="" data-am-modal="{target: '#my-actions'}">
                    <td>青椒炒肉 X2 NO:00001</td>
                    <td>07:33</td>
                </tr>
                <tr class="" data-am-modal="{target: '#my-actions'}">
                    <td>酸辣土豆丝 X1 NO:00001</td>
                    <td>07:45</td>
                </tr>
                <tr class="" data-am-modal="{target: '#my-actions'}">
                    <td>青椒炒肉 X1 NO:00002</td>
                    <td>07:55</td>
                </tr>
                <tr class="" data-am-modal="{target: '#my-actions'}">
                    <td>青椒炒肉 X5 NO:00002</td>
                    <td>07:55</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div data-tab-panel-1 class="am-tab-panel ">
            <table class="am-table am-table-bordered am-table-striped am-table-hover">
                <thead>
                <tr>
                    <th>任务信息</th>
                    <th>开始时间</th>
                </tr>
                </thead>
                <tbody>
                <tr class="" data-am-modal="{target: '#my-cooking-actions'}">
                    <td>青椒炒肉 X2 NO:00001</td>
                    <td>07:33</td>
                </tr>
                <tr class="" data-am-modal="{target: '#my-cooking-actions'}">
                    <td>酸辣土豆丝 X1 NO:00001</td>
                    <td>07:45</td>
                </tr>
                <tr class="" data-am-modal="{target: '#my-cooking-actions'}">
                    <td>青椒炒肉 X1 NO:00002</td>
                    <td>07:55</td>
                </tr>
                <tr class="" data-am-modal="{target: '#my-cooking-actions'}">
                    <td>青椒炒肉 X5 NO:00002</td>
                    <td>07:55</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="am-modal-actions" id="my-actions">
    <div class="am-modal-actions-group">
        <ul class="am-list">
            <li class="am-modal-actions-header">opa list</li>
            <li class="am-modal-actions-danger">
                <a href="#">cooked 1</a>
                <a href="#">cooked all</a>
            </li>
            <li><a href="#">add to cooking queue</a></li>
        </ul>
    </div>
    <div class="am-modal-actions-group">
        <button class="am-btn am-btn-secondary am-btn-block" data-am-modal-close>取消</button>
    </div>
</div>

<div class="am-modal-actions" id="my-cooking-actions">
    <div class="am-modal-actions-group">
        <ul class="am-list">
            <li class="am-modal-actions-header">opa list</li>
            <li class="am-modal-actions-danger">
                <a href="#">cooked 1</a>
                <a href="#">cooked all</a>
            </li>
        </ul>
    </div>
    <div class="am-modal-actions-group">
        <button class="am-btn am-btn-secondary am-btn-block" data-am-modal-close>取消</button>
    </div>
</div>

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="http://s.amazeui.org/assets/2.x/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.min.js"></script>

<script>
    var $btns = $('#animation-cart');
    var dfds = [];
    var animating = false;
    var animation = 'am-animation-shake';

  $(function() {
    $('.am-btn.am-btn-danger.am-gallery-title').on('click', function() {
       if (!animating) {
        animating = true;

        var self = this;
          var sdfd = new $.Deferred();
          dfds.push(sdfd);
          var $this = $(self)
          if ($.AMUI.support.animation) {
            $this.addClass("am-animation-scale-up").one($.AMUI.support.animation.end, function() {
              $this.removeClass("am-animation-scale-up");
              sdfd.resolve();
            });
          }

        $btns.each(function() {
          var dfd = new $.Deferred();
          dfds.push(dfd);
          var $this = $(this);
          if ($.AMUI.support.animation) {
            $this.addClass(animation).one($.AMUI.support.animation.end, function() {
              $this.removeClass(animation);
              dfd.resolve();
            });
          }
        });

        $.when.apply(null, dfds).done(function() {
          animating = false;
          console.log('[AMUI] - 所有动画执行完成');
          dfds = [];
          biz.addOneToCart()
        });
      }
    });
  });

  var biz = {
    addOneToCart:function(){
        $("#animation-cart-count").html($("#animation-cart-count").text()-0+1);
    }
  }





</script>
</body>
</html>